<template>
    <div>
        <div class="background">
            <img :src="imgSrc" width="100%" height="100%" alt="" />
        </div>
        <div>
            <!--    <el-container>-->
            <el-header class="homeHeader">
                <div class="title">
                    SL短链接管理系统
                </div>
                <el-dropdown class="userInfo" @command="commandHander">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="setting">设置</el-dropdown-item>
                        <el-dropdown-item command="userInfo">登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>

            <el-form :model="linkData" ref="numberValidateForm" label-width="100px"  class="demo-ruleForm">
                <el-form-item
                        label="长链接"
                        prop="age"
                        style="margin-bottom: 20px;margin-top: 50px">
                    <el-input  v-model="linkData.longLink" autosize placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-radio-group v-model="radio" class="Radio">
                    <el-tag>点击按钮指定链接长度：
                    <el-radio :label="4">长度为4</el-radio>
                    <el-radio :label="5">长度为5</el-radio>
                    <el-radio :label="6">长度为6</el-radio>
                    </el-tag>
                </el-radio-group>
                <el-form-item
                        label="短链接">
                    <el-input v-model="linkData.shortLink" autosize placeholder="!" onfocus=this.blur()
                    ></el-input>
                    <el-button type="primary" plain @click="Copy">点我复制</el-button>
                </el-form-item>

                <el-form-item class="Button">
                    <el-button type="success" round plain @click="submitForm('numberValidateForm')" style="width: 100px" >生成</el-button>
                    <el-button type="info" round plain @click=" empty">重置</el-button>
                </el-form-item>

            </el-form>
            <vue-qr v-if=flag :text=linkData.shortLink :size="200" style="margin-left: 280px" :logoSrc="logoSrc" colorDark="#4169E1" colorLight="#fff"></vue-qr>

        </div>
    </div>
</template>

<script>
    import {getRequest} from "@/utils/api";

    export default {
        flag:false,
        data() {
            return {
                imgSrc:require('../img/crush.jpg'),
                logoSrc: require('../img/logo.jpg'),
                length: 4,
                radio:4,
                linkData: {
                    longLink: '',
                    shortLink: '',
                    img: '../img/logo.jpg'
                }
            };
        },

        // mounted() {
        //   this.initPositions();
        // },

        methods: {

            Copy() {
                var input = document.createElement("input");   // 直接构建input
                input.value = this.linkData.shortLink;  // 设置内容 需要复制的内容
                document.body.appendChild(input);    // 添加临时实例
                input.select();   // 选择实例内容
                document.execCommand("Copy");   // 执行复制
                document.body.removeChild(input); // 删除临时实例
                // alert("链接已复制成功")
                this.$message({   // 这里提示语
                    message: "链接已复制成功",
                    type: 'warning'
                });
            },
            //重置
            empty(){
                this.linkData.longLink="";
                this.linkData.shortLink="";
                this.flag=false;
            },
            submitForm() {
                this.postRequest("/link/create?longLink="+this.linkData.longLink+"&length="+this.radio ).then((resp) => {
                    this.initShortLink();
                    this.linkData.shortLink =resp.data;
                    this.flag=true;
                })
            },
            // initPositions() {//接口调用
            //   this.$message.success("0000")
            //   this.getRequest("/manager/all", {}).then((resp) => {
            //     if (resp) {
            //       this.$message.success(resp)
            //       this.positions = resp;
            //     }
            //   })
            // },
            initShortLink() {
                this.linkData.shortLink = '';
            },
            Test(){
                getRequest('/manager/info').then(resp=>{
                    this.$message.info(resp.message)
                })
            },

            commandHander(){
                // if(command=='userInfo'){
                //   //注销登录
                //   this.postRequest('/logout');
                //   //清空用户信息
                //   window.sessionStorage.removeItem('tokenStr');
                //   window.sessionStorage.removeItem('user');
                this.$router.replace('/login')
                // }
            }
        }
    }

</script>

<style scoped>
    .background {
        width:16%;
        height:30%;
        left: 0px;
        top: 70%;
    }
    .demo-ruleForm {
        width: 650px;
        display: inline-block;
    }
    .Radio{
        margin-top: 10px;
        margin-left:150px;
        margin-bottom: 40px;
    }
    .Button{
        margin-top: 10px;
        margin-left:150px;
    }
    .homeHeader{
        background:  #88888b;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .homeHeader .title{
        font-size: 30px;
        font-family: 华文楷体;
        color: #f2f5c2;
        margin-left: 350px;
    }

    .homeHeader .userInfo{
        cursor: pointer;
    }
</style>